<template>
  <BgVue4>
    <template #imgFixed>
      <img src="@/assets/imgV2/exchange-bg-bottom.jpg" />
    </template>
    <div class="staticRecord">
      <div class="title-style title">{{ t('home.PTJL') }}</div>
      <div class="block-bor" v-for="(item, index) in list" :key="index">
        <div class="block-item-head">
          <van-cell :border="false">
            <template #title>
              <div class="item-title">{{ item.title }}</div>
            </template>
            <template #right-icon>
              <template v-if="item.status">
                <van-button color="#F9A614">{{
                  t('staticRecord.efficient')
                }}</van-button>
              </template>
              <template v-else>
                <van-button color="#9C9D9E">{{
                  t('staticRecord.invalid')
                }}</van-button>
              </template>
            </template>
          </van-cell>
        </div>
        <div class="item-content">
          <van-cell
            :title="t('staticRecord.FreezeQuantity')"
            :value="item.waitNum"
            :border="false"
          />
          <van-cell
            :title="t('staticRecord.ThawedQuantity')"
            :value="item.thawNum"
            :border="false"
          />
          <van-cell
            :title="t('staticRecord.EffectiveTime')"
            :value="item.effectTime"
            :border="false"
          />
          <van-cell
            :title="t('staticRecord.FreezeTime')"
            :value="item.lostTime"
            :border="false"
          />
        </div>
      </div>
    </div>
  </BgVue4>
</template>
<script>
import { store } from '@/store'
import http from '../http'
import BgVue4 from '@/components/BgVue4.vue'

export default {
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    locale() {
      return store.state.value['app-locale'].localInfo.locale
    },
  },
  watch: {
    locale() {
      this.init()
    },
  },
  methods: {
    async init() {
      const res = await http.get('/api/mining/logs')
      // if (process.env.NODE_ENV !== 'production') {
      //   this.list = [
      //     {
      //       title: this.t('staticRecord.freeze') + '123',
      //       status: 1,
      //       waitNum: 2,
      //       thawNum: 2,
      //       effectTime: 2,
      //       lostTime: 2,
      //     },
      //   ]
      // }
      if (res.code === 200) {
        this.list = res.data.map((row) => {
          return {
            title: this.t('staticRecord.freeze') + `${row.amount}`,
            waitNum: `${row.release}PLAY`,
            thawNum: `${row.amount - row.release}PLAY`,
            effectTime: `${row.create_time.substr(0, 10)}`,
            lostTime: `${row.end_time.substr(0, 10)}`,
            status: row.status === 1,
          }
        })
      }
    },
  },
  components: { BgVue4 },
}
</script>
<style lang="less" scoped>
.staticRecord {
  // text-align: left;
  padding: 0 18px;

  .title {
    padding: 10px 0;
    font-size: 22px;
    text-align: center;
  }

  // .title::after {
  //   position: absolute;
  //   left: 50%;
  //   bottom: 0;
  //   display: block;
  //   width: 60px;
  //   height: 1px;
  //   background: #ff9800;
  //   content: '';
  //   transform: translateX(-50%);
  // }

  .van-cell {
    align-items: center;
    // height: 22px;
    padding: 0;
    background: transparent;
  }
  .van-cell + .van-cell {
    padding-top: 1px;
  }

  :deep(.van-cell__title) {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
  }

  :deep(.van-cell__value) {
    color: #ffffff;
    color: #f7cc40;
    font-size: 13px;
    line-height: 18px;
  }

  :deep(.van-button) {
    height: 26px;
    border-radius: 5px;
  }

  .item-title {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
  }

  .block-item-head {
    padding: 0 15px 0 15px;
  }

  .item-content {
    padding: 11px 15px 10px 15px;
    margin: 8px;
    background-color: #2588d4;
    border-radius: 14px;
  }

  .block-bor {
    padding: 15px 0 0;
    border: solid 3px #ffffff;
    background-image: linear-gradient(
      0deg,
      rgba(114, 173, 234, 0.61) 0%,
      rgba(210, 230, 251, 0.61) 100%
    );
    border-radius: 14px;
    margin-bottom: 15px;
  }
}
</style>
